<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>加入會員</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var user_cc="${county}";
            var user_rr="${region}";
            var zipcode;
            $(document).ready(function(){
                //ajax讀取地址
                $.get("../tools/Address.xml",null,LoadCounty,"xml");                
                $("#county").change(LoadRegion);
                $("#region").change(function(){
                    $("#address").focus();
                });
                
                $("#OKBtn").click(function(){                    
                    return CheckForm();                    
                });
                /*$("#BackBtn").click(function(){
                    location.href="/MyStruts2Web/member";
                });*/
            });
            
            //載入縣市
            function LoadCounty(xx)
            {
                zipcode=xx;
                $(zipcode).find("County").each(function(){
                    var vv=$(this).attr("Name");
                    var s="";
                    if(user_cc==vv)
                        s="<option value=\""+vv+"\" selected=\"selected\" >"+vv+"</option>";
                    else
                        s="<option value=\""+vv+"\">"+vv+"</option>";
                    $(s).appendTo("#county");
                });
                LoadRegion();
            }
            
            //載入鄉鎮
            function LoadRegion()
            {   
                $("#region").empty();
                $("<option>--請選擇--</option>").appendTo("#region");
                
                var cc=$("#county").val();
                if(cc=="--請選擇--") return;
                
                $(zipcode).find("County[Name=\""+cc+"\"]").children().each(function(){
                    var vv=$(this).attr("Name");
                    var s="";
                    if(user_rr==vv)
                        s="<option value=\""+vv+"\" selected=\"selected\" >"+vv+"</option>";
                    else
                        s="<option value=\""+vv+"\">"+vv+"</option>";                    
                    $(s).appendTo("#region");
                });
            }
            
            //檢驗表單填寫
            function CheckForm(){
                var msg="";
                var reg;
        
                if($("#accountName").val()=="")
                    msg+="* 必須填寫欲申請的帳號！\n";
                if($("#accountPassword").val()=="")
                    msg+="* 必須填寫欲使用的密碼！\n";
                
                if($("#confirmAccountPassword").val()=="")
                    msg+="* 必須再次輸入認欲使用的密碼！\n";
                else
                {
                    if($("#accountPassword").val()!=$("#confirmAccountPassword").val())
                        msg+="* 您輸入兩次的密碼不相符！\n";
                }

                if($('input:radio:checked[name="sex"]').val()==null)
                    msg+="* 必須選擇性別！\n";             
                if($("#county").val()=="--請選擇--" || $("#region").val()=="--請選擇--" || $("#address").val()=="")
                    msg+="* 必須選擇及填寫正確的地址！\n";
                
                if($("#email").val()=="")
                    msg+="* 必須填寫電子郵件！\n";
                else
                {
                    reg=/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    if(!reg.test($("#email").val()))
                        msg+="* 請填寫正確的電子郵件！\n";
                }
        
                if(msg=="")
                    return true;
                else
                {
                    alert(msg);
                    return false;
                }
            }
        </script>
        
    </head>
    <body>
        <jsp:include page="../tools/TopBanner.jsp"></jsp:include>
        <h3 class="widget-title">會員專區</h3>

<div id="ContentDiv">
<div style="min-height:250px;margin-bottom:80px;" id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="fragment-1" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#fragment-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"><span>我的訂單</span></a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="fragment-2" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false"><a href="#fragment-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2"><span>個人資料修改</span></a></li>
    <!--<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="fragment-3" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#fragment-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3"><span>Three</span></a></li>-->
  </ul>
  <div id="fragment-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: block;">
    <%@include file="../tools/OrderPanel.jsp" %>
  </div>
  
  <div id="fragment-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
            <form id="form1" action="UpdateMemberProcess" method="post">
            <table width="950" cellpadding="15" >
                <tr>
                    <td align="right" width="100"><b>帳號：</b></td>
                    <td width="300">
                        <input id="accountName" name="accountName" type="text" value="${accountName}" disabled="disable" />
                        <span id="CheckAccountSpan"></span>
                    </td>
                    <td align="right" width="100"><b>聯絡電話：</b></td>
                    <td width="400"><input id="tel" name="tel" type="text" value="${tel}" /></td>
                </tr>
                <tr>
                    <td align="right"><b>密碼：</b></td>
                    <td><input id="accountPassword" name="accountPassword" type="password" value="" /></td>
                    <td align="right"><b>電子郵件：</b></td>
                    <td><input id="email" name="email" type="text" value="${email}" /></td>
                </tr>
                <tr>
                    <td align="right"><b>確認密碼：</b></td>
                    <td><input id="confirmAccountPassword" type="password" value="" /></td>
                    <td align="right" valign="middle"><b>聯絡地址：</b></td>
                    <td rowspan="2">
                        <p><b>縣市：</b><select id="county" name="county"><option>請選擇</option></select>&nbsp;&nbsp;
                            <b>鄉鎮市：</b><select id="region" name="region"><option>請選擇</option></select></p>
                        <br><p><b>地址：</b><input id="address" name="address" type="text" value="${address}" /></p></td>
                </tr>
                <tr>
                    <td align="right"><b>姓名：</b></td>
                    <td><input id="accountRealName" name="accountRealName" type="text" value="${accountRealName}" /></td>
                    <td align="right"><b></b></td>
                </tr>
                <tr>
                    <td align="right"><b>性別：</b></td>
                    <td><input id="maleSex" name="sex" type="radio" value="男生" ${sex=="男生"?"checked=\"checked\"":""} />男生 
                        <input id="femaleSex" name="sex" type="radio" value="女生" ${sex=="女生"?"checked=\"checked\"":""} />女生<br><br></td>
                    <td align="right" valign="middle"></td>
                    <td rowspan="2"><br><br>
                        <input id="OKBtn" type="submit" value="修改會員資料" />
                    </td>
                </tr>
                <tr>
                    <td align="right">&nbsp;</td>
                    <td colspan="2">&nbsp;</td>
                    <td align="right">&nbsp;</td>
                </tr>
                <tr>
                    <td align="right">&nbsp;</td>
                    <td>
                        </td>
                    <td align="right">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>
    
  </div>
  <!--<div id="fragment-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>-->
</div>
</div>
<script>window.onload = function() {
$( "#tabs" ).tabs();
};</script>



        <%@include file="../tools/PageFooter.jsp"  %>
    </body>
</html>
